﻿@{
    ViewData["Title"] = "CodeEditor";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="index.html">Dashboard</a></li>
                    <li>
                        <span>App views</span>
                    </li>
                    <li class="active">
                        <span>Code editor</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Code editor
            </h2>
            <small>Versatile text editor implemented in JavaScript for the browser.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">



    <div class="row">
        <div class="col-lg-12">

            <div class="hpanel">

                <div class="panel-heading">
                    Code Editor
                </div>

                <div class="panel-body">

                    <p>
                        CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
                    </p>

                    <textarea id="code1" class="form-control">

// EDITOR CONSTRUCTOR

// A CodeMirror instance represents an editor. This is the object
// that user code is usually dealing with.

function CodeMirror(place, options) {
if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);

this.options = options = options ? copyObj(options) : {};
// Determine effective options based on given values and defaults.
copyObj(defaults, options, false);
setGuttersForLineNumbers(options);

var doc = options.value;
if (typeof doc == "string") doc = new Doc(doc, options.mode);
this.doc = doc;

var display = this.display = new Display(place, doc);
display.wrapper.CodeMirror = this;
updateGutters(this);
themeChanged(this);
if (options.lineWrapping)
this.display.wrapper.className += " CodeMirror-wrap";
if (options.autofocus && !mobile) focusInput(this);

this.state = {
keyMaps: [],  // stores maps added by addKeyMap
overlays: [], // highlighting overlays, as added by addOverlay
modeGen: 0,   // bumped when mode/overlay changes, used to invalidate highlighting info
overwrite: false, focused: false,
suppressEdits: false, // used to disable editing during key handlers when in readOnly mode
pasteIncoming: false, cutIncoming: false, // help recognize paste/cut edits in readInput
draggingText: false,
highlight: new Delayed() // stores highlight worker timeout
};

// Override magic textarea content restore that IE sometimes does
// on our hidden textarea on reload
if (ie && ie_version < 11) setTimeout(bind(resetInput, this, true), 20);

registerEventHandlers(this);
ensureGlobalHandlers();

startOperation(this);
this.curOp.forceUpdate = true;
attachDoc(this, doc);

if ((options.autofocus && !mobile) || activeElt() == display.input)
setTimeout(bind(onFocus, this), 20);
else
onBlur(this);

for (var opt in optionHandlers) if (optionHandlers.hasOwnProperty(opt))
optionHandlers[opt](this, options[opt], Init);
maybeUpdateLineNumberWidth(this);
for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
endOperation(this);
}

                    </textarea>

                </div>
            </div>

        </div>
    </div>



</div>

@section Styles {
    <environment names="Development,Staging,Production">
        <link rel="stylesheet" href="~/lib/CodeMirror/lib/codemirror.css" />
    </environment>
}

@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/CodeMirror/lib/codemirror.js"></script>
        <script src="~/lib/CodeMirror/mode/javascript/javascript.js"></script>
    </environment>

    <script type="text/javascript">

        $(function () {

            var textarea = document.getElementById("code1");

            // Wait until animation finished render container
            setTimeout(function () {

                CodeMirror.fromTextArea(textarea, {
                    lineNumbers: true,
                    matchBrackets: true,
                    styleActiveLine: true
                });
            }, 500);

        });
    </script>
}